<template>
  <div>
    <!-- 下拉刷新 -->

    <!-- 商品详情 -->

    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
    
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    >
    <!-- 重新找一个默认颜色 -->
      <template #right>
        <van-icon name="star" size="25" id="starcolor"/>
      </template>
    </van-nav-bar>

    <div class="details">
      <div class="pic">
        <div>
          <!-- 轮播图 -->
          <!-- <img src="../../src/assets/1.png" alt="" style="width: 100%" /> -->
          <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
            <van-swipe-item>
              <img src="../assets/1.png" alt="" width="100%" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/2.png" alt="" width="100%" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/3.png" alt="" width="100%" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/4.png" alt="" width="100%" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <van-card
          num="2"
          tag="标签"
          price="2.00/斤"
          desc="果大、红、甜、脆（适宜送亲朋好友）（巨化股份的岁一台电脑九月份巨化股份的岁一台电脑九月份巨化股份的岁一台电脑九月份巨化股份的岁一台电脑九月份）"
          title="陕西红富士"
          origin-price="10.00/斤"
        >
        </van-card>
        <span style="padding-left: 16px">历史评价：</span>
        <van-rate
          v-model="value"
          readonly
          allow-half
          void-icon="star"
          void-color="#eee"
        />
        <van-cell-group>
          <van-cell
            title="客户昵称"
            label="这个商品是个日把歘，不要买，不是什么好玩意，买了一定会后悔。
          这个商品是个日把歘，不要买，不是什么好玩意，买了一定会后悔"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="客户昵称" label="描述购买物品的感受信息" />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="客户昵称" label="描述购买物品的感受信息" />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="客户昵称" label="描述购买物品的感受信息" />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="客户昵称" label="描述购买物品的感受信息" />
        </van-cell-group>
      </div>

      <!-- <img src="" alt=""> -->
    </div>
    <div class="bottombutton">
      <van-field name="stepper" class="gouwu">
        <template #input>
          <van-stepper v-model="stepper" />
          <van-goods-action-button type="warning" text="加入购物车" @click="addshopping" />
          <van-goods-action-button type="danger" text="立即购买"  @click="BuyNow"/>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
   
  data() {
    return {
      stepper: 1,
      value: 4.5,
      co: "gray",
      starcolor:true
    };
  },
 
  methods: {
    onClickLeft() {
      window.location.href = "/";
    },
    // 点击后星变色 
    onClickRight() {
      if (this.starcolor==true) {
        starcolor.style.color = "yellow";
        this.starcolor = false;
        // 当点击星颜色变为红色时，商品信息收藏
      } else{
        starcolor.style.color = "gray";
        this.starcolor = true;
      }
    },
    // 点击按钮跳转购物车
    addshopping(){
       window.location.href = "/goodsDetails";
    },
    BuyNow(){
      // 跳转支付页面
      // window.location.href = "/";
    }

  },
};
</script>

<style lang="css" scoped>
/* 取消内容部分 */
.van-card__content {
  min-height: auto;
}
.van-nav-bar .van-icon{
  color: gray;
  /* box-shadow: 0px 0px 30px 13px rgb(240, 92, 66) inset, 0px 0px 6px 1px black; */
  border-radius: 13px;
}
/* 轮播图样式 */
/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  } */

.van-nav-bar {
  background: linear-gradient(
    to right,
    rgba(255, 196, 0, 0.938),
    #f19267,
    rgb(236, 44, 10)
  );
}
/* .van-ellipsis{
  color: white;
} */
.details {
  /* position: fixed; */
  /* width: 100%; */
  margin-top: 50px;
  margin-bottom: 75px;
}
.pic {
  margin: 5px 15px;
  /* border: 1px solid black; */
}
.pic > div:first-child {
  /* background-color: aquamarine; */
  height: 130px;
  /* background-size: cover; */
}
.van-card {
  /* 取消相对定位 */
  position: static;
  /* border: 1px solid black; */
  /* display: block; */
}
.bottombutton {
  margin: auto;
  width: 100%;
  position: fixed;
  bottom: 0px;
  right: 0px;
}
</style>